<template>
	<view class="container">

		<view>
			<BhTitle :titleText="titleText" :slotHeight="10">
				<!-- <BhTabbar :tabList="tabList" :currentTabIndex="currentTabIndex" @changeTab="changeTab"></BhTabbar> -->
			</BhTitle>
		</view>

		<!-- <BhTitle :titleText="titleText"></BhTitle>
		<BhTabbar :tabList="tabList" :currentTabIndex="currentTabIndex" @changeTab="changeTab"></BhTabbar> -->


		<view class="body-wrap">

			<view v-if="currentTabIndex == 0" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
				<!-- <postItemOtherScan :item="item"></postItemOtherScan> -->
				<!-- <view>{{item.outTradeNo}}</view> -->
				<view style="height: 205rpx;margin:15rpx 30rpx;padding:0 18rpx;
				background-color: white;border-radius: 8rpx;display: flex;
				align-items: center;">
					<view style="width: 158rpx;
height: 145rpx;
border-radius: 8rpx;
background: #FFF1E4;
box-sizing: border-box;
border: 1px solid #FFF1E4;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);position:relative">
						<view style="font-size: 16rpx;
font-weight: normal;
line-height: normal;
color: #880000;position: absolute;top: 14rpx;left: 11rpx;">季度会员卡</view>
					</view>
					<view class="bh-col" style="flex: 1;justify-content: center;margin-left: 33rpx;">
						<view style="font-size: 32rpx;
font-weight: normal;
line-height: normal;
color: #333333;margin-bottom: 22rpx;">{{parseTradeNo(item.outTradeNo)}}</view>
						<view style="font-size: 24rpx;
font-weight: normal;
line-height: normal;
color: #666666;margin-top: 22rpx;">{{parseSuccessTime(item.successTime)}}</view>
					</view>
					<view style="font-size: 48rpx;
font-weight: normal;
line-height: normal;
color: #F8D247;">
						-{{item.total / 100}}
					</view>
				</view>
			</view>
			<!-- <view v-if="currentTabIndex == 1" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
				<postItemOtherScan :item="item" title="TA通过转铺详情收藏了您的店铺"></postItemOtherScan>
			</view> -->
			<BhLoadMore :status="tabLoadingStatus" @click-load-more="()=>{}"></BhLoadMore>
			<view style="padding-top: 60rpx;"
				v-if="currentTabIndex == 0 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0) && tabLoadingStatus != 'loading'">
				<bh-no-more></bh-no-more>
			</view>
			<!-- <view style="padding-top: 60rpx;" v-if="currentTabIndex == 1 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0) && tabLoadingStatus != 'loading'">
				<bh-no-more></bh-no-more>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api'
	import {
		Dict
	} from '../../components/custom_views/dict'
	import postItemOtherScan from '@/PostPage/post_item/post_item_other_scan.vue'
	import BhTabbar from '../../components/custom_views/bh-tabbar.vue'
	import bhNoMore from '../../components/custom_views/bh-no-more.vue';
	import {
		bhTabMixin,
		commonMixin
	} from '../../components/custom_views/mixin'
	import BhLoadMore from '../../components/custom_views/bh-load-more.vue';
import { CustomDate } from '../../components/custom_views/custom_date';

	export default {
		components: {
			postItemOtherScan,
			BhTabbar,
			bhNoMore,
			BhLoadMore
		},
		mixins: [commonMixin, bhTabMixin],
		data() {
			return {
				...bhTabMixin.initData(0),
				tabList: [{
						id: 1,
						name: '浏览我的',
						list: [],
						param: {
							pageNum: 1,
							pageSize: 10,
						}
					},
					{
						id: 2,
						name: '收藏我的',
						list: [],
						param: {
							pageNum: 1,
							pageSize: 50,
						}
					},
				],
				// tabList: [
				// 	{
				// 		name: '转铺'
				// 	},

				// 	{
				// 		name: '找铺'
				// 	}
				// ],
				titleText: '购买记录'
			}
		},
		computed: {
			sellList() {
				let that = this
				return that.collectList.filter(post => post.postType == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value)
			},
			buyList() {
				let that = this
				return that.collectList.filter(post => post.postType == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value)
			},
			images() {
				let images = []
				if (this.postDto.facadePicture) {
					images.push(this.postDto.facadePicture.split(','))
				}
				console.log('images图片信息', images)
				return images
			},
		},
		methods: {
			parseTradeNo(outTradeNo){
				return outTradeNo.substring(0,5) + "*****" + 
				outTradeNo.substring(outTradeNo.length -5)
			},
			parseSuccessTime(successTime){
				return CustomDate.formatSomeDate(new Date(successTime), 'yyyy/MM/dd HH:mm')
			},
			requestData(param) {
				let that = this
				if (this.currentTabIndex == 0) {
					return Api.UserApi.memberPayRecord(param, false)

					// param['postType'] = Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
					// return Api.FootprintsApi.listOfExposure(param, false)
				} else {
					param.pageNum = 1
					return Api.PostApi.listOfBeenCollect(that, false)
				}
			},
			toSellDetail(id) {
				uni.navigateTo({
					url: '/PostPage/post_detail_sell/post_detail_sell?postId=' + id
				})
			},
			toBuyDetail(id) {
				uni.navigateTo({
					url: '/PostPage/post_detail_buy/post_detail_buy?postId=' + id
				})
			},

			// changeTab(changedIndex) {
			// 	console.log('改变tab标签', changedIndex)
			// 	let that = this
			// 	that.currentTabIndex = changedIndex
			// },
			// initApiData(options, completed = () => { }) {
			// 	let that = this
			// 	Api.FootprintsApi.list((res) => {
			// 		if (res.code == 200) {
			// 			that.collectList = res.data.records
			// 		}
			// 		completed()
			// 	})
			// },
		},
		onPullDownRefresh() {
			let that = this
			this.getTabData(that.currentTabIndex, 1, (res) => {
				uni.stopPullDownRefresh()
			})

			// that.initApiData({}, () => {
			// 	uni.stopPullDownRefresh();
			// })
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			let that = this
			this.currentTabIndex = 0
			this.getTabData(0, 1)
			// if (options.tabIndex && options.tabIndex == 1) {
			// 	this.currentTabIndex = 1
			// 	this.getTabData(1, 1)
			// 	// 清空新增的收藏记录
			// 	Api.MetricRecordApi.removeCollectNotify(that, (res) => {

			// 	}, false)
			// } else {
			// 	this.getTabData(0, 1)
			// }

		},
		onReachBottom() {
			if (this.currentTabIndex == 0) {
				this.scrolltolower()
			} else {
				this.tabLoadingStatus = 'no-more'
			}

		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);

	page {
		height: 100vh;
		background-color: #F5F9FA;
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		height: 100vh;
	}

	.header-wrap {
		// margin-top: 36rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		border-radius: 16rpx;
		padding: 8rpx;
		background: #ECF0F1;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;

		.header-item {
			padding: 22rpx 70rpx;
			border-radius: 16rpx;

			// background: #FFFFFF;
			text-align: center;
		}

		.header-item-ac {
			padding: 22rpx 70rpx;
			border-radius: 16rpx;

			background: #FFFFFF;
		}
	}

	.header1-wrap {
		margin-top: 16rpx;
		background: #FFFFFF;
		padding-left: 34rpx;
		padding-right: 34rpx;

		.header1-item {
			margin-top: 18rpx;
			margin-bottom: 18rpx;

			.header1-item-title {
				font-size: 32rpx;
				font-weight: normal;

				color: #666666;
			}

			.header1-item-icon {

				width: 0px;
				height: 0px;
				border: 10rpx solid transparent;
				border-top-color: #666666;
				margin-top: 10rpx;
				margin-left: 10rpx;

			}

			.header1-item-title-ac {
				font-size: 36rpx;
				font-weight: 600;

				color: #333333;

			}

			.header1-item-icon-ac {

				width: 0px;
				height: 0px;
				border: 10rpx solid transparent;
				border-top-color: #333333;
				margin-top: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>